<template>
  <div class="trans-record">
    <div class="bg-c-fff">
      <h2 class="right-title rel">交易记录</h2>
      <div class="right-box">
        <div>
          按日期：
          <calendar value="" format="yyyy-MM-dd" placeholder="开始时间" ref="start"></calendar> 至
          <calendar value="" format="yyyy-MM-dd" placeholder="结束时间" ref="ending"></calendar>
          <select class="input-css" v-model="time" @change="timeChange">
            <option value="">按时间段</option>
            <option value="today">今天</option>
            <option value="weekday">7天内</option>
            <option value="month">30天内</option>
          </select>
          <select class="input-css" v-model="type">
            <option value="">按交易类型</option>
            <option value="1">交易监控服务</option>
            <option value="2">法律服务</option>
          </select>
          <button class="blue-button search-btn" @click="onSearch">搜索</button>
        </div>
        <table>
          <tr>
            <th>时间</th>
            <th>订单编号</th>
            <th>交易类型</th>
            <th>订单金额（元）</th>
            <th>剩余次数</th>
            <th>剩余时间（天）</th>
          </tr>
          <tr v-for="item in transacList">
            <td>{{item.createTime}}</td>
            <td>{{item.id}}</td>
            <td>{{item.type | typeFilter}}</td>
            <td>{{item.amount / 100}}</td>
            <td>{{item.surplusNumber | surplusTimeFilter}}</td>
            <td>{{getDays(item.orderTime, item.surplusTime)}}</td>
          </tr>
        </table>
        <pagination :index="pageIndex" :total="pageTotal" v-show="this.transacList!=0" @pagechange="onPageChange"></pagination>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import Calendar from '../components/Calendar'
import Pagination from '../components/Pagination'
export default {
  components: {
    Pagination,
    Calendar
  },
  data() {
    return {
      pageIndex: 1,
      pageTotal: 0,
      transacList: [],
      beginTime: '',
      endTime: '',
      time: '',
      type: ''
    }
  },
  mounted() {
    this.onPageChange(1)
  },
  methods: {
    onPageChange(n) {
      this.getTransacData(n)
    },
    getTransacData(n) {
      var parms = {
        type: this.type,
        beginTime: this.beginTime,
        endTime: this.endTime,
        page: n,
        rows: 10
      }
      this.$http.get('/transactionRecord/business/read/list', {
        params: parms
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.pageIndex = n
          this.pageTotal = Math.ceil(data.data.total / 10)
          this.transacList = data.data.rows
        } else {
          console.log(data.data.msg)
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    timeChange() {
      var newData = new Date().getTime()
      var newTime = this.formatDate(new Date())
      if (this.time === 'today') {
        this.$refs.start.inputValue = newTime
        this.$refs.ending.inputValue = newTime
      }
      if (this.time === 'weekday') {
        var weekStartTime = this.formatDate(new Date(newData - 7 * 86400000))
        this.$refs.start.inputValue = weekStartTime
        this.$refs.ending.inputValue = newTime
      }
      if (this.time === 'month') {
        var monthStartTime = this.formatDate(new Date(newData - 30 * 86400000))
        this.$refs.start.inputValue = monthStartTime
        this.$refs.ending.inputValue = newTime
      }
    },
    formatDate(date) {
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      return y + '-' + m + '-' + d
    },
    onSearch() {
      this.beginTime = this.$refs.start.inputValue
      this.endTime = this.$refs.ending.inputValue
      this.getTransacData(1)
    },
    getDays(d, i) {
      var dayNumber = Math.floor((new Date().getTime() - (new Date(d)).getTime()) / 1000 / 60 / 60 / 24)
      console.log()
      var difference = i - dayNumber
      console.log(difference)
      if (!i) {
        return '--'
      }
      if (i === -1) {
        return '不限'
      }
      if (difference <= 0) {
        return '0'
      } else {
        return difference
      }
    }
  },
  filters: {
    surplusTimeFilter(t) {
      if (!t) {
        return '--'
      } else if (t < 0) {
        return '不限'
      } else {
        return t
      }
    },
    typeFilter(t) {
      if (t === 1) {
        return '交易监控'
      } else {
        return '法律服务'
      }
    }
  }
}

</script>
<style type="text/css" scoped>
.right-box {
  padding: 40px 30px;
  color: #666666;
  line-height: 30px;
  margin-bottom: 20px;
}

.trans-record select {
  color: #282828;
  width: 170px;
  margin: 0 7px;
}

.trans-record input::-webkit-input-placeholder {
  color: #282828;
}

table {
  margin-top: 30px;
}

table th,
table td {
  width: 156px;
}

.search-btn {
  width: 95px;
  height: 40px;
}

</style>
